{include file="public/header"}

<style>

	/*弹框样式*/
	.imgzoom_pack{
		width:100%;
		height:100%;
		position:fixed;
		left:0;
		top:0;
		background:rgba(0,0,0,.7);
		display:none;
		z-index: 99999999;
	}
	.imgzoom_pack .imgzoom_x{
		color:#fff;
		height:30px;
		width:30px;
		line-height:30px;
		background:#000;
		text-align:center;
		position:absolute;
		right:5px;
		top:5px;
		z-index:9999999;
		cursor:pointer;
	}
	.imgzoom_pack .imgzoom_img{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		overflow:hidden;
	}
	.imgzoom_pack .imgzoom_img img{
		width:100%;
		position:absolute;
		top:50%;
	}
</style>
<body>
	<div class="e_section1">
		<div class="container">
			<div class="a1">
				<a href="javascript:history.back()">
					<img src="__PUBLIC__/home/images/a19.png" alt="" class="">
				</a>
			</div>
			<div class="a2">
				<ul class="clearfix detail_top sli">
					<li class="select a">
						<a href="javascript:;">商品</a>
					</li>
					<li class="a">
						<a href="javascript:;">详情</a>
					</li>
					<li class="a">
						<a href="javascript:;">评价</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="kong1" style="height: 46px;"></div>
	<div class="try">
		<div id="top" class="Try">
			<div class="e_section2">
				<div class="ppp">
					<div class="swiper-container pinch-zoom" id="mm">
					    <div class="swiper-wrapper big_show">
							{foreach $good.swiper as $s_img}
					        <div class="swiper-slide"><img src="{$s_img}" alt=""></div>
							{/foreach}
					    </div>
					    <div class="swiper-pagination"></div>
					</div>
				</div>
			</div>
			<div class="e_section3">
				<div class="container">
					<div class="a1">
						<p class="p1 ">{$good.title}</p>
						<p class="p2">
							<span class="s1">￥{$good.price}</span>
							{if is_numeric($good.price)}
							<s>￥{$good.original_price}</s>
							{/if}
						</p>
						<span class="sr">
							{if $good.collect==0}
							<span class="fa"></span><span class="s1 collect" data-type="0" data-good_id="{$good.id}">收藏</span>
							{else/}
							<span class="fa fa-heart"></span><span class="s1 collect" data-type="1" data-good_id="{$good.id}">已收藏</span>
							{/if}
						</span>
					</div>
				</div>
			</div>
			{if !empty($good.relative_list)}
			<div class="ge"></div>
			<div class="e_section4">
				<div class="container">
					<div class="title">
						<p class="p1">为您推荐</p>
					</div>
					<div class="center">
						<ul class="clearfix">
							{foreach $good.relative_list as $rel}
							<li>
								<a href="{:url('Goods/detail', ['good_id'=>$rel.id])}">
									<div class="big">
										<div class="logo">
											<img src="{$rel.img_url}" alt="">
										</div>
										<div class="center">
											<p class="p1 chao2">{$rel.title}</p>
											<p class="p2">￥{$rel.price}</p>
										</div>
									</div>
								</a>
							</li>
							{/foreach}
						</ul>
					</div>
				</div>
			</div>
			{/if}
			{if !empty($good.recommend_list)}
			<div class="ge"></div>
			<div class="e_section4">
				<div class="container">
					<div class="title">
						<p class="p1">热门搭配</p>
					</div>
					<div class="center">
						<ul class="clearfix">
							{foreach $good.recommend_list as $rc}
							<li>
								<a href="{:url('Goods/detail', ['good_id'=>$rc.id])}">
									<div class="big">
										<div class="logo">
											<img src="{$rc.img_url}" alt="">
										</div>
										<div class="center">
											<p class="p1 chao2">{$rc.title}</p>
											<p class="p2">￥{$rc.price}</p>
										</div>
									</div>
									
								</a>
							</li>
							{/foreach}
						</ul>
					</div>
				</div>
			</div>
			{/if}
		</div>
		<div id="detail" class="Try">
			<div class="container">
				<div class="t1">
					{$good.detail}
				</div>
			</div>
		</div>
		<div id="comment" class="Try">
			<div class="r1">
				{foreach $good.comment as $gc}
				<div class="a1 clearfix">
					<div class="h1 clearfix">
						<div class="logo">
							<img src="{$gc.avatar}" alt="">
						</div>
						<div class="sli">
							<p class="p1">{$gc.nick_name|default="未设置"}</p>
							<p class="p2">
								<?php for($i=1; $i<=5; $i++){ ?>
								<?php if($i<=$gc['star']){ ?>
								<span class="fa fa-star select"></span>
								<?php }else{ ?>
								<span class="fa fa-star"></span>
								<?php } ?>
								<?php } ?>
							</p>
						</div>
						<div class="time">
							<p class="p1">{:date('Y-m-d H:i:s', $gc.comment_time)}</p>
						</div>
					</div>
					<div class="h2">
						<p class="p1">{$gc.content}</p>
					</div>
				</div>
				{/foreach}
			</div>
			<div style="text-align: center;padding: 5px;" onclick="loadMoreComment('{$good.id}', this)"><span>加载更多</span></div>
		</div>
	</div>
	<!-- 规格 -->
	<div class="guige">
		<div class="guige_1">
			<img src="__PUBLIC__/home/images/a79.png" alt="" class="im1 close_btn">
			<div class="title clearfix">
				<div class="logo big_show">
					<img src="__PUBLIC__/home/images/a14.png" alt="">
				</div>
				<div class="center" style="width: 75%;">
					<p class="p1 chao">高大上家居高大上家居高大上家居高大上家居高大上家居</p>
					<p class="p2">￥69.00</p>
				</div>
			</div>
			<div class="list" style="max-height: 150px; overflow-y: scroll;">
				<ul class="clearfix good_options">
				</ul>
			</div>
			<div class="last clearfix">
				<p class="p1">数量</p>
				<p class="p2">
					<img src="__PUBLIC__/home/images/a78.png" alt="" class="del_btn">
					<span class="s1 spec_num">1</span>
					<img src="__PUBLIC__/home/images/a77.png" alt="" class="add_btn">
				</p>
			</div>
			<div class="next">
				<a href="javascript:;" class="addCartSpec">确定</a>
			</div>
		</div>
	</div>
	<div class="kong"></div>
	<div class="footer_car">
		<div class="a1 clearfix">
			<a href="{:url('Chat/index')}">
				<img src="__PUBLIC__/home/images/a29.png" alt="">
				<p class="p1">客服</p>
			</a>
			<a href="{:url('Cart/index')}">
				<img src="__PUBLIC__/home/images/a30.png" alt="">
				<p class="p1">购物车</p>
			</a>
		</div>
		<div class="a2 addCart" data-good_id="{$good.id}" data-spec="{$good.use_spec}" data-price="{$good.price}">
			{if $good.use_spec==1}
			<a href="javascript:;">选择规格</a>
			{else/}
			<a href="javascript:;">加入购物车</a>
			{/if}
		</div>
	</div>

	<section class="imgzoom_pack" style="z-index: 9999999;">
		<div class="imgzoom_x">X</div>
		<div class="imgzoom_img"><img src="" /></div>
	</section>
</body>
<script src="__PUBLIC__/home/js/scale.js"></script>
<script>
	var swiper = new Swiper('#mm', {
		spaceBetween: 30,
		centeredSlides: true,
		autoplay: {
			delay: 2000,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
			clickable: true,
		},
	});
	document.addEventListener("DOMContentLoaded", function(event){
		ImagesZoom.init({
			"elem": ".big_show"
		});
	}, false);
</script>
<script>
	$(function(){
		$(".detail_top").on("click", "li", function () {
			$(this).addClass("select").siblings().removeClass("select");
		});

		$(".close_btn").click(function () {
			$(".guige").hide()
		})
		$(".del_btn").click(function () {
			let origin_num = parseInt($(".spec_num").text());
			if(origin_num-1<=0){
				return false;
			}else{
				$(".spec_num").text(origin_num-1);
			}
		});
		$(".add_btn").click(function () {
			let origin_num = parseInt($(".spec_num").text());
			$(".spec_num").text(origin_num+1);
		});
		$(".q_section2 .a1").click(function(){
			$(this).children('.list').toggle()
		})
		//加入购物车
		$(".addCart").on("click", function (event) {
			event.stopPropagation();
			let good_id = $(this).data("good_id"), use_spec = $(this).data("spec"), price = $(this).data("price");
			if(use_spec == 0){
				if(isNaN(price)){
					modal.msg("品牌会员才可购买");
					return;
				}
				//直接加入购物车
				$.post("{:url('Cart/addCart')}", {good_id:good_id, spec_id:0}, function (res) {

					if(res.result_code == "1111"){
						location.href="{:url('Index/login')}";
					}
					if(res.result_code==0){
						$(".cart_num").html(res.result_data);
					}
					modal.msg(res.result_info);
				});
			}else{
				//拉取规格信息
				$.post("{:url('Goods/getOptions')}", {good_id:good_id}, function (res) {
					if(res.result_code == 0){
						let good = res.result_data.good, options=res.result_data.options;
						$(".guige_1 .title .logo img").attr("src", good.good_img_url);
						$(".guige_1 .title .center .p1").html(good.good_title);
						$(".guige_1 .title .center .p2").html("￥"+good.good_price);
						let _li = "";
						$.each(options, function (i,v) {
							_li += '<li><span class="s1" data-spec_id="'+v.spec_id+'" data-good_id="'+v.good_id+'" data-spec_img="'+v.img_url+'" data-spec_price="'+v.spec_price+'" data-spec_title="'+v.spec_title+'">'+v.spec_title+'</span></li>'
						});
						$(".good_options").html(_li);
						$(".last .spec_num").html(1);
						$(".guige").show();
					}else{
						modal.msg(res.result_info);
					}
				});
			}
		})

		//选中规格更改购买信息
		$(".good_options").on("click", "li span", function () {
			let data = $(this).data();
			$(".guige_1 .title .logo img").attr("src", data.spec_img);
			$(".guige_1 .title .center .p1").html(data.spec_title);
			$(".guige_1 .title .center .p2").html("￥"+data.spec_price);
			$(this).parent().siblings().find("span").removeClass("select");
			$(this).addClass("select");
		})

		//规格加入购物车
		$(".addCartSpec").on("click", function () {
			let data = $(".good_options").find(".select").data();
			if(typeof data == "undefined"){
				modal.msg("你还未选择规格");
				return ;
			}
			if(isNaN(data.spec_price)){
				modal.msg("品牌会员才可购买");
				return ;
			}else{
				//直接加入购物车
				let spec_num = parseInt($(".spec_num").text());
				$.post("{:url('Cart/addCart')}", {good_id:data.good_id, spec_id:data.spec_id, num:spec_num}, function (res) {
					if(res.result_code == "1111"){
						location.href="{:url('Index/login')}";
					}
					if(res.result_code==0){
						$(".cart_num").html(res.result_data);
					}
					modal.msg(res.result_info);
				});
			}
		})
		//添加收藏
		$(".collect").on("click", function () {
			let o=this, type=$(this).data("type"),good_id=$(this).data("good_id");
			$.post("{:url('addCollect')}", {type:type, good_id:good_id}, function (res) {
				if(res.result_code == 0){
					if(type == 1){
						$(o).data("type", 0);
						$(o).prev().removeClass("fa-heart");
						$(o).text("收藏");
					}else{
						$(o).data("type", 1);
						$(o).prev().addClass("fa-heart");
						$(o).text("已收藏");
					}
				}
				modal.msg(res.result_info);
			});
		})
	})

	var p=1,pageNum=20,load=true;
	//加载更多评论
	function loadMoreComment(good_id, o) {
		if(load){
			p++;
			$.post("{:url('getComment')}", {page:p,page_num:pageNum, good_id:good_id}, function (res) {
				let data = res.result_data;
				let _li='';
				$.each(data, function (i,v) {
					_li += '<div class="a1 clearfix">' +
							'	<div class="h1 clearfix">' +
							'		<div class="logo">' +
							'			<img src="'+v.avatar+'" alt="">' +
							'		</div>' +
							'		<div class="sli">' +
							'			<p class="p1">'+(v.nick_name!=""?v.nick_name:"未设置")+'</p>' +
							'			<p class="p2">';
					for (var i=1; i<=5; i++){
						if(i<=v.star){
							_li += '		<span class="fa fa-star select"></span>';
						}else{
							_li += '		<span class="fa fa-star"></span>';
						}
					}
					_li+= '</p>' +
					'</div>' +
					'<div class="time">' +
					'<p class="p1">'+v.comment_time+'</p>' +
					'</div>' +
					'</div>' +
					'<div class="h2">' +
					'<p class="p1">'+v.content+'</p>' +
					'</div>' +
					'</div>';
				});
				$(o).prev().append(_li);
				if(data.length<pageNum){
					$(o).removeAttr("onclick");
					$(o).find("span").text("我是有底线的");
					load = false;
					return ;
				}
			});
		}

		
	}
	//页面滚动
	var comTop = $("#comment").offset().top;
	var deTop = $("#detail").offset().top;
	$(".sli .a").click(function () {
		var num = $(".sli .a").index(this);
		if(num==0){
			$("body,html").animate({
				scrollTop:0
			});
		}else if(num==1){
			$("body,html").animate({
				scrollTop:deTop
			});
		}else{
			$("body,html").animate({
				scrollTop:comTop
			});
		}
	});
	//页面滚动
	$(window).scroll(function() {
		//为了保证兼容性，这里取两个值，哪个有值取哪一个
		//scrollTop就是触发滚轮事件时滚轮的高度
		// var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		// if(scrollTop<(comTop-10)){
		// 	$(".sli .a").removeClass('select');
		// 	$(".sli .a").eq(0).addClass('select');
		// }else if(scrollTop >= (comTop-10) && scrollTop < (deTop-10)){
		// 	$(".sli .a").removeClass('select');
		// 	$(".sli .a").eq(1).addClass('select');
		// }else{
		// 	$(".sli .a").removeClass('select');
		// 	$(".sli .a").eq(2).addClass('select');
		// }
	})
</script>
</html>